<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/dataTables/datatables.min.css" />
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../weixin/js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/plugins/dataTables/jquery.dataTables.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/tableToExcel.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/extTools.js"></script>
		<style type="text/css">
			html {
				overflow: hidden
			}
			
			td.details-control {
				background: url('../images/details_open.png') no-repeat center center;
				cursor: pointer;
			}
			
			tr.shown td.details-control {
				background: url('../images/details_close.png') no-repeat center center;
			}
			
			.textcenter {
				text-align: center;
			}
			
			.screening {
				display: flex;
				display: -webkit-flex;
			}
			
			.left-top {
				width: 95%;
			}
			
			.right-top {
				width: 5%;
			}
			
			#example th td {
				text-align: center !important;
				vertical-align: middle !important;
			}
			
			.table>tbody>tr>td,
			.table>thead:first-child>tr:first-child>th {
				text-align: center !important;
				vertical-align: middle !important;
			}
			
			.btntogle {
				background: url(../images/details_open.png) no-repeat right;
			}
			
			.sontable {
				display: none;
			}
			
			.ProvinceCss {
				height: 100%;
				text-align: left;
			}
			
			.sontableheight td {
				padding: 0 !important;
			}
			.sontableheight td div,.sontable th{
			    text-align: center;
				vertical-align: middle;
			}
			
			#example2 tbody td {
				padding: 0 !important;
				text-align: center;
				vertical-align: middle;
			}
			
			
			
			.listbox {
				font-size: 12px;
				text-align: center;
				vertical-align: middle !important;
			}
			
			li {
				list-style: none;
			}
			
			a {
				text-decoration: none;
			}
			
			.pagination {
				position: relative;
			}
			
			.pagination li {
				display: inline-block;
				margin: 0 5px;
			}
			
			.pagination li a {
				padding: .5rem 1rem;
				display: inline-block;
				border: 1px solid #ddd;
				background: #fff;
				color: #0E90D2;
			}
			
			.pagination li a:hover {
				background: #eee;
			}
			
			.pagination li.active a {
				background: #0E90D2;
				color: #fff;
			}
			
			label {
				max-width: 70%;
			}
			
			.form-group {
				padding: 0 !important;
				padding-left: 16px !important;
			}
			
			.firsttableheader {
				text-align: center;
				vertical-align: middle;
			}
			.text-color-green{
				color: green;
			}
			.text-color-orange{
				color: orange;
			}
		</style>
	</head>

	<body>
		<div id="km">
			<ol class="breadcrumb" style="margin: 0px;">
				<li>
					<span>筛选条件</span>
				</li>
			</ol>
			<div class="selectheader" style="width: 100%;margin: 0px;">
				<div class="screening">
					<div class="left-top">
						<form class="form-inline row" role="form">
							<div class="form-group col-lg-2 col-md-2 col-sm-2 col-xs-2">
								<label for="name">供应商：</label>
								<select class="form-control" v-model="selectedvendCustID" style="width: 50%;" id="vendCustID">
									<option></option>
									<option v-for="option in VendCustList" v-bind:value="option.VendCustName" v-bind:vendCustID="option.VendCustID">
										{{ option.VendCustName }}
									</option>
								</select>
							</div>
							<div class="form-group col-lg-2 col-md-2 col-sm-2 col-xs-2">
								<label for="name">省份：</label>
								<select class="form-control" v-model="selected" style="width: 50%;" id="OperationAreaList">
									<option></option>
									<option v-for="option in OperationAreaList" v-bind:value="option.OperationAreaName" v-bind:OperationAreaID="option.OperationAreaID">
										{{ option.OperationAreaName }}
									</option>
								</select>
							</div>
							<!--<input type="text" id="test1">-->
							<div class="form-group col-lg-6 col-md-6 col-sm-6 col-xs-6">
								<label for="name">日期：</label>
								<input type="text" id="test0" />
								<label for="name">至</label>
								<input type="text" id="test1" />
							</div>

						</form>
						<form class="form-inline row" role="form">
							<div class="form-group col-lg-2 col-md-2 col-sm-2 col-xs-2" style="padding-left: 30px;">
								<label for="name" style="margin-left:13px">年份：</label>
								<select class="form-control" v-model="yearselected" style="width: 50%;">
									<option></option>
									<option v-for="option in PeriodYearList" v-bind:value="option.PeriodYear">
										{{ option.PeriodYear }}
									</option>
								</select>
							</div>
							<div class="form-group col-lg-2 col-md-2 col-sm-2 col-xs-2">
								<label for="name">季节：</label>
								<select class="form-control" v-model="seasonselected" id="seasonID" style="width: 50%;">
									<option></option>
									<option v-for="option in MatSeasonList" v-bind:value="option.SeasonName" v-bind:SeasonID="option.SeasonID">
										{{ option.SeasonName }}
									</option>
								</select>
							</div>
							<div class="form-inline col-lg-7 col-md-7 col-sm-7 col-xs-7 " style="padding:0;">
								<div class="form-group">
									<label for="name">系列：</label>
									<select class="form-control" v-model="seriesselected" id="seriesID">
										<option></option>
										<option v-for="option in MatSeriesList" v-bind:value="option.SeriesName" v-bind:SeriesID="option.SeriesID">
											{{ option.SeriesName }}
										</option>
									</select>
								</div>
								<div class="form-group">
									<label for="name">品类：</label>
									<select class="form-control" v-model="modelselected" id="modelID">
										<option></option>
										<option v-for="option in MatModelList" v-bind:value="option.ModelName" v-bind:ModelID="option.ModelID">
											{{ option.ModelName }}
										</option>
									</select>
								</div>
								<div class="form-group">
									<label for="name">货号：</label>
									<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');" id="materialID" placeholder="请输入名称">
								</div>
							</div>
						</form>
					</div>
					<div class="right-top">
						<input type="button" class="btn btn-primary btn-sm" id="query" value="查询" />
					</div>
				</div>
			</div>

			<div style="margin-top: 5px; margin-left: 5px">
				<table border="1" id="exportReportTotal" title="全国销售汇总表" hidden="hidden" style="display:none">
					<thead id="exTable_headTotal">
					</thead>
					<tbody id="exTable_bodyTotal">
					</tbody>
				</table>
				<table border="1" id="exportReport" title="省份销售汇总明细" hidden="hidden" style="display:none">
					<thead id="exTable_head">
					</thead>
					<tbody id="exTable_body">
					</tbody>
				</table>
				<table border="1" id="exportReportDetail" title="销售明细" style="display:none">
					<thead id="exTable_headDetail">
					</thead>
					<tbody id="exTable_bodyDetail">
					</tbody>
				</table>
			</div>

			<div class="father-and-son-table">
				<ol class="breadcrumb" style="margin:0">
					<li>
						<span>分仓及店仓明细(点击"+"看店仓明细)</span>
					</li>
				</ol>
				<ul class="nav nav-pills">
					<li v-bind:class="classObject" @click="changtable(0)">
						<a href="#">销售汇总</a>
					</li>
					<li v-bind:class="classObject1" @click="changtable(1)">
						<a href="#">销售明细</a>
					</li>
					<li style="float: right;">
						<button type="button" class="btn btn-primary" id="relaodbtns" onclick='tableToExcelMethod(exportReportTotal,exportReport)' >导出销售汇总</button>
						<button type="button" class="btn btn-primary" id="relaodbtns2" onclick='exportReportDetail()' style="display:none;">导出销售明细</button>
					</li>
				</ul>
				<table cellspacing="0" width="100%" v-if="classObject.active" style="margin:0;" class="table table-striped">
					<thead style="background-color: #337ab7;color: white;">
						<tr>
							<!--<th style="width: 50px;"></th>-->
							<th class="firsttableheader" width="10%">货号</th>
							<th class="firsttableheader" width="12%">供应商</th>
							<th class="firsttableheader" width="10%">范围</th>
							<th class="firsttableheader">售罄率</th>
							<th class="firsttableheader">销售金额</th>
							<th class="firsttableheader">销售数量</th>
							<th class="firsttableheader">成本价</th>
							<th class="firsttableheader">当前仓存</th>
							<th class="firsttableheader">当前店存</th>
						</tr>
					</thead>
				</table>
				<table cellspacing="0" width="100%" v-if="classObject1.active" style="margin:0;" class="table table-striped">
					<thead style="background-color: #337ab7;color: white;">
						<tr>
							<th width="60" class="listbox">省份</th>
							<th width="150" class="listbox">仓库</th>
							<th width="100" class="listbox">仓库类型</th>
							<th width="100" class="listbox">店铺性质 </th>
							<th width="100" class="listbox">供应商</th>
							<th width="150" class="listbox">货号</th>
							<th width="80" class="listbox">成本价</th>
							<th width="80" class="listbox">颜色</th>
							<th width="100">尺码</th>
							<th width="100">销售金额</th>
							<th width="100">销售数量</th>
							<th width="100">当前库存</th>
						</tr>
					</thead>
				</table>
				<div style="overflow-y: scroll;" id="ts">
					<table id="example" cellspacing="0" width="100%" v-if="classObject.active" class="table table-striped" style="table-layout: fixed">
						<tobody>
							<tr>
								<td v-if="resultTotalList.length==0" style="text-align:center;vertical-align:middle;">当前数据为空</td>
							</tr>
						</tobody>
						<tbody v-for="(value,index) in resultTotalList">

							<tr>
								<td width="6%" class="btntogle" data-btn="1">{{value.MaterialID}}</td>
								<td width="15%">{{value.VendCustName}}</td>
								<td width="10%">{{value.DataText}}</td>
								<td>{{value.SaleRate}}</td>
								<td>{{value.SaleAmount}}</td>
								<td>{{value.SaleQty}}</td>
								<td>{{value.CostPrice}}</td>								
								<td>{{value.StockQty}}</td>
								<td style="color:red;">{{value.ShopQty}}</td>
							</tr>
							<tr class="sontable" style="background-color:#cecece;color:white;">
								<th colspan="1" style="background-color: white;border: 0;padding:0;"></th>
								<th colspan="2" style="padding:0;">省份</th>
								<th colspan="2" style="padding:0;">仓库/店铺</th>
								<th style="padding:0;">售罄率</th>
								<th style="padding:0;">销售金额</th>
								<th style="padding:0;">销售数量</th>
								<th style="padding:0;">当前库存</th>

							</tr>
							<tr class="sontable sontableheight" v-for="d in value.resultTotalProvList">
								<td colspan="1" style="background-color: white;border: 0;"></td>
								<td colspan="2">
									<div v-for="(c,index) in d" v-if="index==0" class="ProvinceCss">{{c.Province}}<p style="font-size: 10px;color: #CECECE;margin: 0px;">总库存：{{c.allQtys}}</p></div>
								</td>
								?
								<td colspan="2">
									<div v-for="c in d" :class="textColor(c.DataText)" >{{c.DataText}}</div>
								</td>								
								<td>
									<div v-for="c in d">{{changku(c.DataText,c.SaleRate)}}</div>
								</td>
								<td>
									<div v-for="c in d">{{changku(c.DataText,c.SaleAmount)}}</div>
								</td>
								<td>
									<div v-for="c in d">{{changku(c.DataText,c.SaleQty)}}</div>
								</td>
								<td>
									<div v-for="c in d" style="color:blue;" >{{c.Qty}}</div>
								</td>
							</tr>
						</tbody>
					</table>
					<table id="example2" cellspacing="0" width="100%" v-if="classObject1.active" class="table table-striped" style="position: relative">
						<tbody v-for="lists in resultDetailList">
							<tr v-for="(list,index) in lists">
								<td style="display: none;"></td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" width="60">
									{{list.Province}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" width="150">
									{{list.StockName}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" width="100">
									{{list.StockType}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" width="100">
									{{list.ShopType}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" width="100">
									{{list.VendCustName}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" width="150">
									{{list.MaterialID}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" width="80">
									{{list.CostPrice}}
								</td>
								<td v-if="index==0" :rowspan="list.rowlength" class="listbox" width="80">
									{{list.ColorName}}
								</td>
								<td width="100">{{list.SizeName}}</td>
								<td width="100">{{list.SaleAmount}}</td>
								<td width="100">{{list.SaleQty}}</td>
								<td width="100">{{list.Qty}}</td>
							</tr>
						</tbody>
					</table>
					<div style="position: absolute;bottom: 0%;left:40%;display:none;" id="pagebtns">
						<page></page>
					</div>
				</div>

			</div>
		</div>

		<script type="text/x-template" id="page">
			<ul class="pagination">
				<li v-show="current != 1" @click="current-- && goto(current--)">
					<a href="#">上一页</a>
				</li>
				<li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
					<a href="#">{{index}}</a>
				</li>
				<li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)">
					<a href="#">下一页</a>
				</li>
				<li>
					<a href="#">共{{allpage}}页</a>
				</li>
			</ul>
		</script>
	</body>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/plugins/layer/layDatev5.0.9/laydate.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/plugins/layer/layer.min.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		var yearform, yearto;

		Vue.component("page", {
			template: "#page",
			data: function() {
				return {
					current: 1,
					showItem: 5,
					allpage: 15
				}
			},
			computed: {
				pages: function() {
					var pag = [];
					if(this.current < this.showItem) { //如果当前的激活的项 小于要显示的条数
						//总页数和要显示的条数那个大就显示多少条
						var i = Math.min(this.showItem, this.allpage);
						while(i) {
							pag.unshift(i--);
						}
					} else { //当前页数大于显示页数了
						var middle = this.current - Math.floor(this.showItem / 2), //从哪里开始
							i = this.showItem;
						if(middle > (this.allpage - this.showItem)) {
							middle = (this.allpage - this.showItem) + 1
						}
						while(i--) {
							pag.push(middle++);
						}
					}
					return pag
				}
			},
			methods: {
				goto: function(index) {
					if(index == this.current) return;
					this.current = index;
					console.log(this.current)
					//这里可以发送ajax请求
					vm.requirePage(index);
				}
			}
		})

		var vm = new Vue({
			el: "#km",
			data: {
				inputData: {},
				pageCount: 0,
				OperationAreaList: [],
				selectedvendCustID: '',
				selected: '',
				MatSeasonList: [],
				seasonselected: '',
				ShopNatureList: [],
				shopselected: '',
				MatSeriesList: [],
				seriesselected: '',
				MatModelList: [],
				modelselected: '',
				VendCustList: [],
				custselected: '',
				PeriodYearList: [],
				yearselected: '',
				tablelistsdata: [],
				resultTotalList: [],
				resultDetailList: [],
				querybtnData: {},
				classObject: {
					active: true,
				},
				classObject1: {
					active: false,
				},
				testList: [],
				qtys:0
			},
			methods: {
				getallQtys:function(c,i){
					i==0?this.qtys=c:this.qtys+=c;
					return this.qtys;
					console.log(this.qtys)
				},
				changku:function(ct,x){
					if(/仓库/.test(ct)){
						return "-";
					}else{
						return x;
					}
				},
			    textColor:function(t){
				   if(/正/.test(t)){
				   	 return "text-color-green"
				   }else if(/折/.test(t)){
				   	return "text-color-orange"
				   }else{
				   	return "text-color"
				   }			  
				},
				changtable: function(n) {
					if(n == 0) {
						this.classObject.active = true;
						this.classObject1.active = false;
						$("#pagebtns").hide();
						$("#relaodbtns").show();
						$("#relaodbtns2").hide();
					} else {
						this.classObject.active = false;
						this.classObject1.active = true;
						$(".btntogle").css('background-image', 'url(../images/details_open.png)');
						$(".btntogle").attr("data-btn", "1");
						$("#pagebtns").show();
						$("#relaodbtns").hide();
						$("#relaodbtns2").show();
					}
				},
				requirePage: function(n) {
                     vm.tablelistsdata = {};
					 vm.$children[0]._data.allpage=1;
					 vm.resultTotalList = [];
					 vm.resultDetailList = [];
					 
					var a = layer.load(0, {
						shade: false
					});
					var page;
					if(n) {
						page = n;
					} else {
						page = 1;
					}
					vm.querybtnData = {
						"action": "GetVendCustSalesReport",//ExportVendCustSalesReport
						"UserID": localStorage.getItem("UserID"),
//						"UserID": 4,
						"vendCustID": $('#vendCustID option:selected').attr('vendCustID'),
						"operationAreaID": $('#OperationAreaList option:selected').attr('OperationAreaID'), //省份
						"startDate": yearform, //启始时间
						"endDate": yearto, //to时间
						"periodYear": vm.yearselected, //年份
						"seasonID": $('#seasonID option:selected').attr('seasonID'), //季节
						"seriesID": $('#seriesID option:selected').attr('seriesID'), //系列
						"modelID": $('#modelID option:selected').attr('modelID'), //品类
						"materialID": $('#materialID').val() || '',
						"page": page,
						"size": 100
					}
					var dataArr = [];

					$.post("VendCustHandler.ashx", vm.querybtnData,
						function(data) {
							layer.close(a);
							console.log(data)
							if(data.Success == true) {
							vm.tablelistsdata = data.Data;
							vm.$children[0]._data.allpage = vm.tablelistsdata.Count;
							vm.resultTotalList = vm.tablelistsdata.resultTotalList;
							$.each(vm.tablelistsdata.resultDetailList, function() {
								this[0].rowlength = this.length;
								vm.resultDetailList.push(this);
							});
							$.each(vm.tablelistsdata.resultTotalList,function(){
								var _this = this;
								
								$.each(_this.resultTotalProvList,function(){
									var _that = this;									
									var allQtys = 0;
									$.each(_that,function(){
										allQtys+=this.Qty;
									})
									_that[0].allQtys = allQtys;
								})
							})
							console.log(vm.resultTotalList)
							//
							var exTBodyTotal = $("#exTable_bodyTotal");
							var exTHeadTotal = $("#exTable_headTotal");

							var exTBody = $("#exTable_body");
							var exTHead = $("#exTable_head");

							var exTBodyDetail = $("#exTable_bodyDetail");
							var exTHeadDetail = $("#exTable_headDetail");

							

								var exThMarkTotal = "<tr>";
								exThMarkTotal += "<th>货号</th><th>供应商</th><th>范围</th><th>售罄率</th><th>销售金额</th><th>销售数量</th><th>成本价</th><th>当前仓存</th><th>当前店存</th>";
								exThMarkTotal += "</tr>";

								var exInTHead = "<tr>";
								exInTHead +=
									"<th>货号</th><th>省份</th><th>仓库/店铺</th><th>售罄率</th><th>销售金额</th><th>销售数量</th><th>当前库存</th>";
								exInTHead += "</tr>";

								var exInTHeadDetail = "<tr>";
								exInTHeadDetail +=
									"<th>省份</th><th>仓库</th><th>仓库类型</th><th>店铺性质</th><th>供应商</th><th>货号</th><th>成本价</th><th>颜色</th><th>售罄率</th><th>尺码</th><th>销售金额</th><th>销售数量</th><th>当前库存</th>";
								exInTHeadDetail += "</tr>";

								exTHeadTotal.empty();
								exTHeadTotal.append(exThMarkTotal);

								exTHead.empty();
								exTHead.append(exInTHead);

								exTHeadDetail.empty();
								exTHeadDetail.append(exInTHeadDetail);

								if(data.Data.resultTotalList.length > 0) {

									var exTbHtmlTotal = "";

									var exTbHtml = "";

									data.Data.resultTotalList.map(function(rtOutLi) {

										var materialID = rtOutLi.MaterialID;

										var exOutTBodyTotal = "<tr>";

										exOutTBodyTotal += "<td>" + materialID + "（" + rtOutLi.ColorName + "）</td>";
										exOutTBodyTotal += "<td>" + rtOutLi.VendCustName + "</td>";
										exOutTBodyTotal += "<td>" + rtOutLi.DataText + "</td>";
										exOutTBodyTotal += "<td>" + (Y.checkNull(rtOutLi.SaleRate) ? '0.00' : (rtOutLi.SaleRate * 100).toFixed(2)) + "%</td>";
										exOutTBodyTotal += "<td>" + (Y.checkNull(rtOutLi.SaleAmount) ? '0.00' : rtOutLi.SaleAmount.toFixed(2)) + "</td>";
										exOutTBodyTotal += "<td>" + rtOutLi.SaleQty + "</td>";
										exOutTBodyTotal += "<td>" + (Y.checkNull(rtOutLi.CostPrice) ? '0.00' : rtOutLi.CostPrice.toFixed(2)) + "</td>";
										exOutTBodyTotal += "<td>" + rtOutLi.StockQty + "</td>";
										exOutTBodyTotal += "<td>" + rtOutLi.ShopQty + "</td>";

										exOutTBodyTotal += "</tr>";

										exTbHtmlTotal += exOutTBodyTotal;

										if(rtOutLi.resultTotalProvList.length > 0) {

											rtOutLi.resultTotalProvList.map(function(rtInList) {

												rtInList.map(function(rtInLi) {
													var exInTBody = "<tr>";
													exInTBody += "<td>" + materialID + "</td>";
													exInTBody += "<td>" + rtInList[0].Province + "</td>";
													exInTBody += "<td>" + rtInLi.DataText + "</td>";
													exInTBody += "<td>" + (Y.checkNull(rtInLi.SaleRate) ? '0.00' : (rtInLi.SaleRate * 100).toFixed(2)) + "%</td>";
													exInTBody += "<td>" + (Y.checkNull(rtInLi.SaleAmount) ? '0.00' : rtInLi.SaleAmount.toFixed(2)) + "</td>";
													exInTBody += "<td>" + rtInLi.SaleQty + "</td>";
													exInTBody += "<td>" + rtInLi.Qty + "</td>";
													exInTBody += "</tr>";
													exTbHtml += exInTBody;

												});
											});
										}

									});

									exTBodyTotal.empty();
									exTBodyTotal.append(exTbHtmlTotal);

									exTBody.empty();
									exTBody.append(exTbHtml);
								} else {
									exTHeadTotal.empty();
									exTHeadTotal.append(exThMarkTotal);
									var emptyTable = "<tr><td colspan='9'>暂无数据</td></tr>";
									exTBodyTotal.empty();
									exTBodyTotal.append(emptyTable);
								}

								if(data.Data.resultDetailList.length > 0) {

									var exTbHtmlDetail = "";

									data.Data.resultDetailList.map(function(rdList) {

										var rdLength = rdList.length;
										var firstRD = rdList[0];
										var exTBodyDetail = "<tr>";
										exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.Province + "</td>";
										exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.StockName + "</td>";
										exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.StockType + "</td>";
										exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.ShopType + "</td>";
										exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.VendCustName + "</td>";
										exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.MaterialID + "</td>";
										exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.CostPrice + "</td>";
										exTBodyDetail += "<td rowspan='" + rdLength + "'>" + firstRD.ColorName + "</td>";
										exTBodyDetail += "<td rowspan='" + rdLength + "'>" + (Y.checkNull(firstRD.SaleRate) ? '0.00' : firstRD.SaleRate.toFixed(2)) + "%</td>";

										rdList.map(function(rdLi, index) {
											if(index > 0) {
												exTBodyDetail += "<tr>";
											}
											exTBodyDetail += "<td>" + rdLi.SizeName + "</td>";
											exTBodyDetail += "<td>" + (Y.checkNull(rdLi.SaleAmount) ? '0.00' : rdLi.SaleAmount.toFixed(2)) + "</td>";
											exTBodyDetail += "<td>" + rdLi.SaleQty + "</td>";
											exTBodyDetail += "<td>" + rdLi.Qty + "</td>";
											exTBodyDetail += "</tr>";
										});
										exTbHtmlDetail += exTBodyDetail;
									});

									exTBodyDetail.empty();
									exTBodyDetail.append(exTbHtmlDetail);

								} else {
									var emptyTableDetail = "<tr><td colspan='13'>暂无数据</td></tr>";
									exTBodyDetail.empty();
									exTBodyDetail.append(emptyTableDetail);
								}
							}
							//

						})
				}
			}
		})
		//http://192.168.100.189:7820/VendCust/VendCustHandler.ashx
		$.post("VendCustHandler.ashx", {
				"action": "GetCondition",
//				"UserID": 4
                "UserID": localStorage.getItem("UserID")
			},
			function(data) {
				vm.inputData = data.Data;
				vm.OperationAreaList = vm.inputData.OperationAreaList;
				vm.MatSeasonList = vm.inputData.MatSeasonList;
				vm.ShopNatureList = vm.inputData.ShopNatureList;
				vm.MatSeriesList = vm.inputData.MatSeriesList;
				vm.MatModelList = vm.inputData.MatModelList;
				vm.VendCustList = vm.inputData.VendCustList;
				vm.PeriodYearList = vm.inputData.PeriodYearList;
			})

		//layerdata
		//年份
		var beforyear = laydate.render({
			elem: '#test0',
			type: 'date',
			value: '2017-12-10',
			done: function(value, date, endDate) {
				console.log(value);
				yearform = value;
			}
		});
		yearform = beforyear.config.value;
		var afteryear = laydate.render({
			elem: '#test1',
			type: 'date',
			value: '2017-12-12',
			done: function(value, date, endDate) {
				console.log(value);
				yearto = value;
			}
		});
		yearto = afteryear.config.value;
		//查询按钮
		$('#query').click(function() {
			vm.requirePage();
		});
		$("#example").on('click', '.btntogle', function() {
			var bgDom = $(this);
			if(bgDom.attr("data-btn") == 1) {
				bgDom.css('background-image', 'url(../images/details_close.png)');
				bgDom.attr("data-btn", "0");
			} else {
				bgDom.css('background-image', 'url(../images/details_open.png)');
				bgDom.attr("data-btn", "1");
			}
			bgDom.parent().parent().find('.sontable').toggle();
		});

		$("#ts").height(($(window).height() * 0.7) - $("#pagebtns").height());

		$(window).resize(function() {

			<!-- $("#ts").height(($(body).height()) - $("#pagebtns").height()); -->
			var boxh = $(window).height() -$(".breadcrumb").height()*2-$(".selectheader").height()-$(".nav-pills").height() - $("#pagebtns").height()-95;
			
             $("#ts").height(boxh);
		})


        var exportReportDetail = function() {
		  console.log(vm.querybtnData);
		  var sendData = vm.querybtnData;
		  sendData.action ="ExportVendCustSalesReport";
		  console.log(sendData)
			$.post("VendCustHandler.ashx",sendData,
				function(data) {
				console.log(data)
					if(data.Success) {
						outExcle(data.Data);
					} else {
						layer.alert(data.Message, {
							icon: 1,
							skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
						});
					}
				});
		}

		
	</script>

</html>